<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>高级效果</title>
    <script src="js/jquery.js"></script>
</head>
<body>
    <script>
        function size() {
            $(document).ready(function ($) {
                $('div.member').on('mouseenter mouseleave', function (e) {
                    var size = e.type == 'mouseenter' ? 85 : 75;
                    var padding = e.type == 'mouseenter' ? 0 : 5;
                    $(this).find('img').animate({
                        width: size,
                        height: size,
                        paddingTop: padding,
                        paddingLeft: padding
                    })
                });
            });
        }

        function animated() {
            $(document).ready(function () {
                $('div.member').on('mouseenter mouseleave', function (e) {
                    var $image = $(this).find('img');
                    if (!$image.is(':animated') || e.type == 'mouseleave') {
                        var size = e.type == 'mouseenter' ? 85 : 75;
                        var padding = e.type == 'mouseenter' ? 0 : 5;
                        $image.animate({
                            width: size,
                            height: size,
                            paddintTop: padding,
                            paddingLeft: padding
                        });
                    }
                });
            });
        }

        function stop() {
            $(document).ready(function () {
                $('div.member').on('mouseenter mouseleave', function (e) {
                    var size = e.type == 'mouseenter' ? 85 : 75;
                    var padding = e.type == 'mouseenter' ? 0 : 5;
                    $(this).find('img').stop().animate({
                        width: size,
                        height: size,
                        paddintTop: padding,
                        paddingLeft: padding
                    });
                });
            });
        }

        function off() {
            $('#fx-toggle').show().on('click', function () {
                $.fx.off = !$.fx.off;
            });
        }

        function defaultSpeeds() {
            var speeds = {
                slow: 600,
                fast: 200,
                _default: 400
            };
            $$.fx.speeds.crawl = 1200;
            var someElement;
            $(someElement).animate({ width: '300px' }, 'crawl');
        }

        function modifyDefaultSpeeds() {
            $(document).ready(function () {
                $.fx.speeds._default = 250;

                function showDetails() {
                    $(this).find('div').css({
                        display: 'block',
                        left: '-300px',
                        top: 0
                    }).each(function (index) {
                        $(this).animate({
                            left: 0,
                            top: 25 * index
                        });
                    });
                }

                $('div.member').click(showDetails);
            });
        }

        function active() {
            $(document).ready(function () {
                $.fx.speeds._default = 250;

                function showDetails() {
                    var $member = $(this);
                    if ($member.hasClass('active')) {
                        return;
                    }
                    $('div.member.active').removeClass('active').children('div').fadeOut();
                    $member.addClass('active');
                    $(this).find('div').css({
                        display: 'block',
                        left: '-300px',
                        top: 0
                    });
                }

                $('div.member').click(showDetails);
            });
        }

        function easing() {
            $(document).ready(function () {
                $.fx.speeds._default = 250;

                function showDetails() {
                    var $member = $(this);
                    if ($member.hasClass('active')) {
                        return;
                    }
                    $('div.member.active').removeClass('active').children('div').fadeOut();
                    $member.find('div').css({
                        display: 'block',
                        left: '-300px',
                        top: 0
                    }).each(function (index) {
                        $(this).animate({
                            left: 0,
                            top: 25 * index
                        }, {
                                duration: 'slow',
                                specialEasing: { top: 'easeInQuart' }
                            });
                    });
                }

                $('div.member').click(showDetails);
            });
        }

        function deferredObject() {
            var $movable = $('<div id="movable"></div>')
                .appendTo('body');
            var bioBassStyles = {
                dispaly: 'none',
                height: '5px',
                width: '25px'
            },
                bioEffects = {
                    duration: 800,
                    easing: 'easeOutQuart',
                    specialEasing: { opaciity: 'linear' }
                };

            function showBio() {
                var $member = $(this).parent(),
                    $bio = $member.find('p.bio'),
                    startStyles = $.extend(bioBassStyles, $member.offset()),
                    endStyles = {
                        width: $bio.width(),
                        top: $member.offset().top + 5,
                        left: $member.width() + $member.offset().left - 5,
                        opacity: 'show'
                    };
                $movable.html($bio.clone())
                    .css(startStyles)
                    .animate(endStyles, bioEffects)
                    .animate({ height: $bio.height() }, { easing: 'easeOutQuart' });
            }

            $.fx.speeds._default = 250;

            function showDetails() {
                var $member = $(this);
                if ($member.hasClass('active')) {
                    return;
                }
                $movable.fadeOut();
                $('div.member.active')
                    .removeClass('active')
                    .children('div')
                    .fadeOut();
                $member.find('div').css({
                    display: 'block',
                    left: '-300px',
                    top: 0
                }).each(function (index) {
                    $(this).animate({
                        left: 0,
                        top: 25 * index
                    }, {
                            duration: 'slow',
                            specialEasing: { top: 'easeInQuart' }
                        });
                }).promise().done(showBio);
            }

            $('div.member').click(showDetails);
        }

        function step() {
            $('#mydiv').animate({
                height: '200px',
                width: '400px'
            }, {
                    step: function (now, tween) {
                        // 监控高度和宽度
                        // 调整补间属性
                    },
                    progress: function (animation, progress, remainingMs) {

                    }
                })
        }

        function prefilter() {
            $.Animation.prefilter(function (element, properties, options) {
                if (options.removeAfter) {
                    this.done(function () {
                        $(element).remove();
                    });
                }
            });
        }
    </script>
</body>
</html>